<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
        <el-form-item label="商品名称：" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="商品状态：" prop="status">
            <el-select v-model="formInline.status" placeholder="请选择">
                <el-option label="停用" value="停用" />
                <el-option label="启用" value="启用" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="botton-group">
        <el-button plain type="primary" @click="addchange()">新增</el-button>
        <el-button plain @click="delect()">删除</el-button>
    </div>
    <el-table ef="multipleTableRef" :data="state.typeData" style="width: 100%; margin-bottom: 20px" row-key="key"
        :tree-props="defaultProps" height="530" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" sortable />
        <el-table-column prop="title" label="名称" sortable />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="title" label="操作">
            <template #default="scope">
                <el-button :icon="Setting" circle @click="handleEdit(scope.$index, scope.row)" />
            </template>
        </el-table-column>
    </el-table>

    <!-- <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="state.pageNum" v-model:page-size="state.pageSize"
            :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div> -->
    <el-dialog v-model="dialogFormVisible" title="新增类型">
        <el-form :model="form">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色描述" :label-width="formLabelWidth">
                <el-input v-model="form.remark" type="textarea" autocomplete="off" />
            </el-form-item>
            <div class="account-list">
                <div>
                    <p style="margin: 10px 10px;">权限选择：</p>
                    <el-tree :data="state.typeData" :props="defaultProps1" show-checkbox ref="treeRef" node-key="key"
                        style="overflow-y: auto;height: 210px;">
                    </el-tree>
                </div>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, ElTable, ElTree, ElMessage } from 'element-plus'
import { getGenTypeApi } from '../../apis/gen'

import {
    Setting,
} from '@element-plus/icons-vue'

const ruleFormRef = ref<FormInstance>()
const treeRef = ref<InstanceType<typeof ElTree>>()

interface User {
    id: number
    date: string
    name: string
    hasChildren?: boolean
    children?: User[]
}

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const multipleSelection = ref<User[]>([])
const formLabelWidth = '80px'

const formInline = reactive({
    name: '',
    status: '',
    goodstypeId: '',
})

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    userName: '',
    remark: '',
    roleId: ''
})

const state = reactive({
    pageSize: 10,
    pageNum: 1,
    typeData: [] as any,
    total: 1
})

const defaultProps = {
    children: state.typeData.children,
    hasChildren: "true"
}
const defaultProps1 = {
    children: state.typeData.children,
    label: "title",
}

function search() {
    const a = `name=${formInline.name}&status=${formInline.status}&goodstypeId=${formInline.goodstypeId}&pageSize=${state.pageSize}&pageNum=${state.pageNum}&`
    // getGen(a)
}

const resetForm = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    // getGen()
};

async function getAllType(data?: any) {
    const res = await getGenTypeApi(data)
    console.log(res);
    state.typeData = res.rows.children
    state.total = res.rows.children.length

}

const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    // dialogTableVisible.value = true
    // state.changeoradd = "修改字典"
    // form1.keyy = row.keyy
    // form1.valuee = row.valuee
    // form1.tableName = row.tableName
    // form1.fieldName = row.fieldName
    // form1.dictId = row.dictId

}

const dialogFormVisible = ref(false)

function addchange() {
    dialogFormVisible.value = true
}

function delect() {
    // const data = JSON.parse(JSON.stringify(multipleSelection.value));
    // console.log(data);
    // const a = data.map((item: { name: any }) => {
    //     return item.name
    // })
    // state.delId = a
    // const b = data.map((item: { id: any }) => {
    //     return item.id
    // })
    // state.delname = a
    // state.delId = b
    // console.log(a);
    // console.log(b);
    // if (data != "") {
    //     dialogVisible.value = true
    // } else {
    //     ElMessage.error("没有选中任何内容，无法删除")
    // }


}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    state.pageSize = val
    console.log(state.pageSize);
    getAllType(`pageSize=${val}`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    state.pageNum = val
    getAllType(`pageNum=${val}`)
}

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

onMounted(() => {
    getAllType()
})
</script>

<style scoped>

</style>